<template>
  <div class="funding-statistics">
    <div class="page-header">
      <h1>筹款统计</h1>
      <p>分析众筹项目的资金流动情况</p>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="24" class="stats-grid">
      <el-col :xs="24" :sm="12" :md="6" v-for="stat in statsData" :key="stat.key">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" :class="stat.iconClass">
              <el-icon :size="24"><component :is="stat.icon" /></el-icon>
            </div>
            <div class="stat-info">
              <h3>{{ stat.value }}</h3>
              <p>{{ stat.label }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表 -->
    <el-row :gutter="24" class="charts-grid">
      <el-col :xs="24" :lg="16">
        <el-card class="chart-card" shadow="never">
          <div class="card-header">
            <h4>月度筹款趋势</h4>
            <el-date-picker v-model="trendDate" type="month" placeholder="选择月份" />
          </div>
          <v-chart class="chart" :option="trendOption" autoresize />
        </el-card>
      </el-col>
      <el-col :xs="24" :lg="8">
        <el-card class="chart-card" shadow="never">
           <div class="card-header">
            <h4>资金来源分布</h4>
          </div>
          <v-chart class="chart" :option="sourceOption" autoresize />
        </el-card>
      </el-col>
    </el-row>

    <!-- 最新大额支持记录 -->
     <el-card class="table-card" shadow="hover">
      <div class="card-header">
        <h4>最新大额支持</h4>
      </div>
      <el-table :data="topDonations" style="width: 100%">
        <el-table-column prop="projectName" label="项目名称"></el-table-column>
        <el-table-column prop="supporterName" label="支持者"></el-table-column>
        <el-table-column prop="amount" label="金额" align="right">
          <template #default="{row}">¥{{ formatNumber(row.amount) }}</template>
        </el-table-column>
        <el-table-column prop="supportTime" label="时间"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, provide } from 'vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart, LineChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import { Money, Coin, TrendCharts, User } from '@element-plus/icons-vue';

use([CanvasRenderer, PieChart, LineChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent]);
provide(THEME_KEY, 'light');

const trendDate = ref(new Date());

const statsData = reactive([
  { key: 'total', label: '总筹款金额', value: '¥12,834,500', icon: Money, iconClass: 'total-icon' },
  { key: 'projects', label: '成功项目数', value: '1,288', icon: TrendCharts, iconClass: 'projects-icon' },
  { key: 'supporters', label: '总支持人次', value: '345,982', icon: User, iconClass: 'supporters-icon' },
  { key: 'avg', label: '平均客单价', value: '¥37.09', icon: Coin, iconClass: 'avg-icon' },
]);

const trendOption = reactive({
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    data: Array.from({ length: 30 }, (_, i) => `${i + 1}日`),
  },
  yAxis: { type: 'value' },
  series: [{
    data: Array.from({ length: 30 }, () => Math.floor(Math.random() * 50000) + 10000),
    type: 'line',
    smooth: true,
  }],
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
});

const sourceOption = reactive({
  tooltip: { trigger: 'item' },
  legend: { top: '5%', left: 'center' },
  series: [{
    name: '资金来源',
    type: 'pie',
    radius: ['40%', '70%'],
    avoidLabelOverlap: false,
    itemStyle: {
      borderRadius: 10,
      borderColor: '#fff',
      borderWidth: 2
    },
    label: { show: false, position: 'center' },
    emphasis: {
      label: { show: true, fontSize: '20', fontWeight: 'bold' }
    },
    labelLine: { show: false },
    data: [
      { value: 1048, name: '微信支付' },
      { value: 735, name: '支付宝' },
      { value: 580, name: '银行卡' },
      { value: 484, name: '其他' },
    ]
  }]
});

const topDonations = ref([
    { projectName: 'AI智能写作助手', supporterName: '王总', amount: 5000, supportTime: '2024-05-20 10:30' },
    { projectName: '环保再生材料背包', supporterName: '李女士', amount: 3000, supportTime: '2024-05-20 09:15' },
    { projectName: '沉浸式VR游戏《幻境》', supporterName: '游戏爱好者', amount: 8000, supportTime: '2024-05-19 18:00' },
    { projectName: '手工巧克力艺术品', supporterName: '美食家协会', amount: 2500, supportTime: '2024-05-19 15:20' },
]);

const formatNumber = (num) => num.toLocaleString();

</script>

<style scoped>
.funding-statistics { max-width: 1200px; margin: 0 auto; }
.page-header { margin-bottom: 24px; }
.page-header h1 { font-size: 24px; font-weight: 700; }
.page-header p { color: #666; }
.stats-grid, .charts-grid { margin-bottom: 24px; }
.stat-card { border-radius: 12px; }
.stat-content { display: flex; align-items: center; gap: 16px; }
.stat-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; }
.total-icon { background: linear-gradient(135deg, #667eea, #764ba2); }
.projects-icon { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.supporters-icon { background: linear-gradient(135deg, #f093fb, #f5576c); }
.avg-icon { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.stat-info h3 { font-size: 24px; margin: 0; }
.stat-info p { margin: 0; color: #666; }
.chart-card { border-radius: 12px; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.card-header h4 { margin: 0; font-size: 16px; }
.chart { height: 350px; }
.table-card { border-radius: 12px; }
</style> 